<template>
	<CollapseContainer class="w-full mt-5 bg-white rounded-md">
		<!-- :style="styleObject" ref="domRef" style="transform-origin: top left;" -->
		<div class="shouye1" ref="domRef">
			<div class="title">
				<p>充电安全预警平台</p>
				<i class="light"></i>
				<div class="gobackdiv">
					<Icon color="#0465b8" size="25" icon="akar-icons:arrow-back-thick-fill" />
				</div>
				<Icon class="quanping" color="#0465b8" size="30" @click="toggleDom"
					icon="material-symbols:fit-screen" />
				<div class="timediv">
					<Time :value="now" mode="datetime" />
				</div>
			</div>
			<div class="maindiv">
				<a-row :gutter="{ sm: 12, xxl: 24 }" style="height: 100%">
					<a-col :span="6">
						<leftcomts v-if="isDataReadok" :leftdata="screenAlldata"> </leftcomts>
					</a-col>
					<a-col :span="12">
						<centercomts v-if="isDataReadok" :centerdata="screenAlldata" />
					</a-col>
					<a-col :span="6">
						<rightcomts v-if="isDataReadok" :rightdata="screenAlldata"> </rightcomts>
					</a-col>
				</a-row>
			</div>
		</div>
	</CollapseContainer>
</template>
<script lang="ts" setup name="bigscreen">
import { defineComponent, ref } from 'vue';
import { useFullscreen } from '@vueuse/core';

import { Time } from '/@/components/Time';
import { Icon } from '/@/components/Icon';
import { getAll } from '@/api/screen/yewuapi.js';
const isDataReadok = ref(false);
const screenAlldata = ref({});

// import { Alldata } from './data.js';
// screenAlldata.value = Alldata.result;
const now = ref(new Date().getTime());

function goback() {
	window.location.href = '/dashboard/analysis';
	// this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
	//   console.log('登录跳转首页出错,这个错误从哪里来的');
	// });
}
onBeforeMount(async () => {
	await getAllapi();
	isDataReadok.value = true;
});
// const styleObject = ref({});

// const checkScreenSize = () => {
// 	const scaledata = ref(1);
// 	var width = window.innerWidth;
// 	var height = window.innerHeight;
// 	var scaleX = width / 1920; //设备默认宽度为1912px
// 	var scaleY = height / 1080; //设备默认高度为1076px
// 	scaledata.value = scaleX <= scaleY ? scaleX : scaleY;

// 	styleObject.value = {
// 		// transform: `scale(${scaledata.value},${scaledata.value})`,
// 		transform: `scale(${scaleX},${scaleY})`,
// 	};
// };
onMounted(async () => {
	setInterval(() => {
		now.value = new Date().getTime();
	}, 1000);
	// window.addEventListener("resize", checkScreenSize);
	// checkScreenSize();
});

// onUnmounted(() => {
// 	// 清理事件监听器
// 	window.removeEventListener("resize", checkScreenSize);
// });
onUpdated(() => {
	// isDataReadok.value = true;
	// console.log('onUpdated', isDataReadok.value);
});

async function getAllapi() {
	await getAll().then((res) => {
		screenAlldata.value = Object.assign({}, res);
	});
}
import leftcomts from '/@/views/bigscreen/leftcomts/leftcomts.vue';
import centercomts from '/@/views/bigscreen/centercomts/centercomts.vue';
import rightcomts from '/@/views/bigscreen/rightcomts/rightcomts.vue';
const domRef = ref<Nullable<HTMLElement>>(null);

const { toggle: toggleDom } = useFullscreen(domRef);
</script>

<style lang="less" scoped>
@import '/@/assets/css/baseinit.css';

.shouye1 {
	width: 100%;
	height: 100%;
	min-width: 1700px;
	min-height: 900px;
	background: #000d25;
	overflow: hidden;
}

@keyframes mymove {
	from {
		left: 0px;
	}

	to {
		left: calc(100% - 40px);
	}
}

.light {
	position: absolute;
	left: 0px;
	top: 0;
	width: 401px;
	height: 45px;
	background-image: -moz-linear-gradient(0deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5),
			rgba(255, 255, 255, 0));
	background-image: -webkit-linear-gradient(0deg,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.5),
			rgba(255, 255, 255, 0));
	transform: skewx(-25deg);
	animation: mymove 9s infinite;
	animation-delay: 0.1s;
}

.maindiv {
	// display: flex;
	padding: 16px 20px 0px 20px;
	height: 100%;
}

.title {
	position: relative;
	width: 100%;

	.gobackdiv {
		width: 30px;
		position: absolute;
		left: 7px;
		top: 10px;
		cursor: pointer;
	}

	.quanping {
		position: absolute;
		left: 51px;
		top: 10px;
		cursor: pointer;
	}

	p {
		width: 100%;
		text-align: center;
		height: 46px;
		font-size: 30px;
		color: #46a6ff !important;
		background: #1a273a;
		font-weight: 400;
		line-height: 46px;
	}

	.timediv {
		position: absolute;
		right: 5%;
		top: 50%;
		margin-top: -11px;
		color: rgba(187, 210, 236, 0.81);
		font-size: 18px;
	}

	.userdiv {
		position: absolute;
		right: 20px;
		top: 50%;
		margin-top: -11px;
		font-size: 14px;
		color: rgb(221, 221, 221);
	}
}
</style>
